import React from 'react'
import Swiper from './SwiperComponent'
import styles from '../../css/UploadImgs.module.css'

class ShowImgList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  showImg = (e) => {
    e.stopPropagation()
    this.setState({
      showImg: !this.state.showImg
    })
  }
  render() {
    const { imgList,isAll } = this.props
    let len = 0
    let list = imgList
    if(!isAll){
      len = imgList.length - 3;
      list = imgList.slice(0, 3)
    }
    
    return (

      <div className={styles['showImg_list']}>

        {
          list.map((item, index) => {
            return (
              <ImgItem
                key={index}
                imgurl={item.imgurl}
                index={index}
                len={len > 0 ? len : '0'}
                showImg={this.showImg}
                isAll={isAll}
              />
              // <img key={index} src={item.url} />
            )
          })
        }
         {this.state.showImg &&
          <div style={maskStyle}>
            <div
              style={maskCloseStyle}
              onClick={this.showImg}
            >
              关闭
        </div>
            <Swiper height='500' imgList={imgList.slice(0, imgList.length - 1)} />
          </div>

        }
      </div>
    )
  }
}

class ImgItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imgurl: ''
    }
  }
  componentDidMount() {
    const that = this
    const imgurl = this.props.imgurl
    const image = new Image()
    image.onload = function (imgurl) {
      that.setState({
        width: this.width,
        height: this.height
      })
    }
    image.src = imgurl
  }
  // showImg=(index,e)=>{
    
  //   this.props.showImg()
  // }
  render() {
    const { imgurl, index, showImg, len,isAll } = this.props
    const {width,height} = this.state
    return (
      <div
        className={styles['showImg_item']}
        onClick={(e) => {
          return showImg(e)
        }}     
        style={{
          marginLeft: index%3?'2%':'0'
        }}   
      >
        {/* <div className={styles['showImg_item_img']}> */}
          <img
            style={{
              ...itemStyle,
              width: width <= height ? '105px' : 'auto',
              height: width > height ? '105px' : 'auto'
            }}
            src={imgurl}
            alt=''
          />
        {(index===2 && !isAll&&len>0) &&
        <div style={eMask}>
        +{len}张
        </div>
      }
      </div>
    )
  }
}
const eMask = {
  width:'100%',
  height:'100%',
  background:'rgba(0,0,0,0.3)',
  display:'flex',
  justifyContent:'center',
  alignItems:'center',
  fontSize:'16px',
  color:'#fff',
  position:'absolute',
  top:'0',
  left:'0',
}
const itemStyle = {
  display: 'block',
  borderRadius: '8px',
  width: '105px',
}
const maskStyle={
  position: 'fixed',
  top: '0',
  left: '0',
  zIndex: '99',
  width: '100%',
  height: '100%',
  background: 'rgba(0,0,0,0.3)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}
const maskCloseStyle={
  position: 'absolute',
  top: '10px',
  right: '10px',
  zIndex: '12',
  fontSize: '14px',
  color: '#fff'
}
export default ShowImgList